<wicket:extend>

    <!-- Inicio del Cuerpo -->

   <div class="jumbotron">
      <div class="container">
        <h1 class="text-center" wicket:id="titulo">Editar Datos del Villano</h1>

        <form class="form-horizontal" role="form" wicket:id="nuevoVillanoForm">

          <!-- Nombre del Villano -->

          <div class="form-group">
            <label class="control-label col-xs-4" for="nombre">Nombre Del Villano</label>
            <div class="controls col-xs-4">
              <input wicket:id="villano.nombre" type="text" placeholder="Ej: Pepe" class="form-control" />
            </div>
          </div>
          
          <!-- Sexo del Villano -->
          
           <div class="form-group">
              <label class="control-label col-xs-4" for="sexo">Sexo</label>
              <div class="controls col-xs-4">
                <select class="form-control" wicket:id="villano.sexo">
                  <option>sexo</option>
                </select>
              </div>
              <br>
              
          </div>
          
          
          <!-- SeniasParticulares del villano -->

          <div>
            <table class="table table-bordered" border="1" style="width: 50%; margin: 0 auto">
              <thead>
                <tr>
                  <th class="text-center" id="main">Señas Particulares</th>
                  <th class="text-center" id="main">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr style="background: #FFFFFF" wicket:id="villano.seniasParticulares">
                  <td class="text-center"><span wicket:id="stringSenias">unaSenia</span></td>
                  <td class="text-center">
                    <div class="btn-group">
                      <button wicket:id="eliminarSeniaParticular" class="btn-link"><p class="glyphicon glyphicon-trash"></p></button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <!-- Agregar Senia al villano -->
			<br>
            <div class="form-group">
              <label class="control-label col-xs-4" for="senia">Seña Particular Nueva</label>
              <div class="controls col-xs-4">
                <input wicket:id="nuevaSeniaParticular" type="text" placeholder="Ej: Pelo color naranja" class="form-control" />
              </div>
              <div class="form-actions col-xs-4">
                <button wicket:id="agregarSeniaParticular" type="submit" class="btn btn-primary">Agregar Característica</button>
              </div>
            </div>

          </div>

          <!-- Hobbies del Villano -->
          <div>
            <table class="table table-bordered" border="1" style="width: 50%; margin: 0 auto">
              <thead>
                <tr>
                  <th class="text-center" id="main">Hobbies</th>
                  <th class="text-center" id="main">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <tr style="background: #FFFFFF" wicket:id="villano.hobbies">
                  <td class="text-center"><span wicket:id="stringHobbies">unHobbie</span></td>
                  <td class="text-center">
                    <div class="btn-group">
                      <button wicket:id="eliminarHobbie" class="btn-link"><p class="glyphicon glyphicon-trash"></p></button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <!-- Agregar Hobbie al Villano -->
			<br>
            <div class="form-group">
              <label class="control-label col-xs-4" for="hobbie">Hobbie Nuevo</label>
              <div class="controls col-xs-4">
                <input wicket:id="nuevoHobbie" type="text" placeholder="Ej: Pelo color naranja" class="form-control" />
              </div>
              <div class="form-actions col-xs-4">
                <button wicket:id="agregarHobbie" type="submit" class="btn btn-primary">Agregar Característica</button>
              </div>
            </div>

          </div>

          <div wicket:id="feedbackPanel" class="alert alert-error">
            <strong>Warning!</strong> Best check yourself, you're not looking too good.
          </div>

          <div class="form-actions">
            <button wicket:id="aceptar" type="submit" class="btn btn-primary">Aceptar</button>
            <button wicket:id="cancelar" type="submit" class="btn">Cancelar</button>
          </div>

        </form>

      </div>
    </div>

</wicket:extend>